<template>
  <div>
    <puplic-modal
      width="1200px"
      :publicVisible="publicVisible"
      modalStyle="addEditSupportModal"
      @cancel="cancel"
      @handleOk="handleOk"
      confirmContext="发布"
      :title="title"
    >
      <div slot="content" class="content">
        <div class="search-group" style="width: 35%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">文书标题:</div>
            <div class="input-item" style="width: 100%; color: #7ab4ed">
              {{ records.documentName }}
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 35%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">版本名称:</div>
            <div class="input-item" style="width: 100%">
              <a-input :maxLength="30" clearable v-model="fileName" placeholder="请输入版本名称" />
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 35%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">更新描述:</div>
            <div class="input-item" style="width: 100%">
              <a-input :maxLength="30" clearable v-model="memo" placeholder="请输入更新描述" />
            </div>
          </div>
        </div>

        <u-editor
          class="mt-10"
          styleStr="width: 100%; height: 100%"
          :message="message"
          @change="contentChange"
          @inputStringLength="getStringLength"
        ></u-editor>
        <!-- :type="records.imgType" -->
        <span style="color: #4994e0">最长输入{{ quillStringLength }}/ 10000</span>
      </div>
    </puplic-modal>
  </div>
</template>
<script>
import UEditor from '@/components/UEditor'
import puplicModal from '@/components/publicModal'
import { documentVersionAdd, documentVersionEdit } from '@/api/document'
export default {
  components: { puplicModal, UEditor },
  name: 'addEditSupportModal',
  data() {
    return {
      queryParam: {},
      title: '新增',
      records: {},
      publicVisible: false,
      fileName: '',
      memo: '',
      message: '',
      msgContent: '',
      quillStringLength: 0,
    }
  },
  mounted() {},
  methods: {
    show(records) {
      this.records = records
      if (records && records.id) {
        this.title = '编辑'
        this.message = records.content
        this.fileName = records.fileName
        this.memo = records.memo
      } else {
        this.title = '新增'
        this.message = ''
      }
      this.publicVisible = true
    },

    contentChange(value) {
      this.msgContent = value
    },

    getStringLength(value) {
      this.quillStringLength = value
      if (value > 10000) this.$message.error('字段超长不能被提交')
    },

    async handleOk() {
      if (this.fileName == '') {
        this.$message.warn('请输入版本名称')
        return
      }

      if (this.memo == '') {
        this.$message.warn('请输入更新描述')
        return
      }

      if (this.msgContent == '') {
        this.$message.warn('请上传内容')
        return
      }

      if (this.quillStringLength > 10000) {
        this.$message.error('字段超长不能被提交')
        return
      }

      let data = {
        fileName: this.fileName,
        memo: this.memo,
        content: this.msgContent,
      }

      if (this.title == '新增') {
        data.documentId = this.records.documentId
        let res = await documentVersionAdd(data)
        this.$message.success(res.message)
        this.cancel()
        this.$emit('refresh')
      } else {
        data.id = this.records.id
        let res = await documentVersionEdit(data)
        this.$message.success(res.message)
        this.cancel()
        this.$emit('refresh')
      }
    },

    cancel() {
      this.publicVisible = false
      this.fileName = ''
      this.memo = ''
      this.msgContent = ''
      this.message = ''
    },
  },
}
</script>
<style lang="less">
@import '~@/assets/less/common.less';
.ant-upload.ant-upload-select-picture-card,
.ant-upload {
  background: #104c8a;
  border-color: #104c8a;
}
.addEditSupportModal {
  .content {
    padding: 0.2rem 0.2rem 0.1rem 0.2rem !important;
  }
  .mt-10 {
    margin-top: 0.1rem;
  }
  .items {
    margin-bottom: 0.1rem;
    .label {
      display: inline-block;
      vertical-align: middle;
      width: 0.5rem;
    }
    .value {
      display: inline-block;
      vertical-align: middle;
      width: calc(100% - 0.7rem);
    }
  }
  .uploadImg {
    .label {
      vertical-align: top;
    }
    .value {
      vertical-align: top;
    }
  }
  .search-group {
    padding: 0;
  }
}
</style>
